<template>
   <div class="viewport">
        <topTitle :title="title"></topTitle>  
        <div class="userSet">
            <div class="setContent">
                <ul>
                    <li class="usLi">
                        <p class="usLiLeft fl">
                            头像
                        </p>
                        <p class="usLiRight fr">
                            <img id="image" src="@/assets/img/avatar_default.png" onclick="onSelectPic('image');">
                            <span></span>
                        </p>
                    </li>
                    <li class="usLi" onclick="toUpdateNickName();">
                        <p class="usLiLeft fl">
                            昵称
                        </p>
                        <p class="usLiRight fr">
                            测试526153
                            <span></span>
                        </p>
                    </li>
                </ul>	
            </div>
            <div class="setContent">
                <ul>
                    <li class="usLi" onclick="toResetPhone();">
                        <p class="usLiLeft fl">
                            手机号
                        </p>
                        <p class="usLiRight fr">
                            更换
                            <span></span>
                        </p>
                    </li>
                    <router-link to="/resetPassword">
                    <li class="usLi" onclick="toResetPwd();">
                        
                        <p class="usLiLeft fl">
                            登录密码
                        </p>
                        <p class="usLiRight fr">
                            修改
                            <span></span>
                        </p>
                    </li>
                    </router-link>
                </ul>	
            </div>
            <router-link class="setFoot" to="/loginRegister">
                退出当前用户
            </router-link>
        </div> 
        
    </div> 
</template>
<script>
import TopTitle from '@/components/web/public/TopTitle'
export default {
    name:"userSet",
    data(){
        return{
            title:"收货地址"
        }
    },
    components:{
        topTitle:TopTitle
    }
}
</script>
<style scoped>

.userSet{
    padding-top: 1.0rem;
    background: #f2f2f2;
}
.setContent {
    margin-top: 2%;
}
.usLi {
    background: #fff;
    height: 1.12rem;
    border-bottom: 1px solid #F2F2F2;
    line-height: 1.12rem;
}
.usLiLeft {
    margin-left: 4.3%;
    color: #424242;
    font-size: 0.3rem;
}
.fl {
    float: left;
}
.usLiRight {
    margin-right: 4.3%;
    font-size: 0.26rem;
    color: #666666;
}
.fr {
    float: right;
}
.usLiRight img {
    width: 0.64rem;
    height: 0.64rem;
    border-radius: 10rem;
    vertical-align: middle;
}
.usLi span {
    width: 0.32rem;
    height: 0.32rem;
    background: url(../../../assets/img/arrow_grey_r.png);
    display: inline-block;
    background-size: 100%;
    vertical-align: -6%;
}
.setFoot {
    margin-top: 6%;
    text-align: center;
    height: 1.12rem;
    line-height: 1.12rem;
    background: #fff;
    color: #FF4F00;
    font-weight: bold;
    font-size: 0.3rem;
    display: inherit;
}
</style>
